<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>新增页面 </title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- NProgress -->
		<!--<link href="css/nprogress.css" rel="stylesheet">-->

		<!-- Custom Theme Style -->
		<link href="css/custom.min.css" rel="stylesheet">
	</head>

	<body class="nav-md">
		<div class="container body">
			<div class="main_container">
				<div id="head">
						</div>

				<!-- top navigation -->
			
				<!-- /top navigation -->
				<!-- page content -->
				<div class="right_col" role="main">
					<div class="">
						<div class="page-title">
							<div class="title_left">
								<h3 style="color: green;">添加用户</h3>
							</div>

							<div class="title_right">
								<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">

								</div>
							</div>
						</div>
						<div class="clearfix"></div>

						<div class="row">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="x_panel">
									<div class="x_title">

										<div class="clearfix" style="text-align: center;"><span style="font-size: 25px;color: #000000;">新增用户</span></div>
									</div>
									<div class="x_content">

										<form class="form-horizontal form-label-left" novalidate> 


											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">用户名 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input id="name" class="form-control col-md-7 col-xs-12"  name="name" placeholder="请填写用户名"  type="text">
												</div>
												<label style="color: red;" id="userNameError"></label>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="dlname">用户真实姓名 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input id="dlname" class="form-control col-md-7 col-xs-12"  name="name" placeholder="请填写用户真实姓名"  type="text">
												</div>
												<label style="color: red;" id="dluserNameError"></label>
											</div>
											<div class="item form-group" >
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="utype">用户角色 <span class="required">*</span>
												</label>
												<div class=" col-xs-9" id="email3" >
													<select style="padding: 6px " id="utype">
														<option value="">—请选择—</option>

													</select>
													<label style="color: red;" id="utypeError"></label>
												</div>
												</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="pwd">用户初始密码 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="text" id="pwd" name="email" value="111111"  readonly class="form-control col-md-7 col-xs-12">
												</div>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="phone">用户手机号 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="tel" id="phone" name="email" placeholder="请填写用户手机号"  class="form-control col-md-7 col-xs-12">
												</div>
												<label style="color: red;" id="phoneError"></label>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">用户邮箱 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="tel" id="email" name="email" placeholder="请填写规范的邮箱名"  class="form-control col-md-7 col-xs-12">
												</div>
												<label style="color: red;" id="emailError"></label>
											</div>
											<div class="item form-group" > 
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="s_province">用户所在区域 <span class="required">*</span>
												</label>
												<div class="col-xs-6" id="email2" >
													<select id="s_province" name="s_province" style="padding: 6px 2px">

													</select>

													<select id="s_city" name="s_city" style="padding: 6px 12px">
														<option value="">—请选择—</option>

													</select>
													<select id="s_county" name="s_county" style="padding: 6px 12px">
														<option value="">—请选择—</option>

													</select>
												</div>
												<label style="color: red;" id="s_provinceError"></label>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="IdCard">用户身份证号码 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="tel" id="IdCard" name="email" placeholder="请填写规范的身份证号码"  class="form-control col-md-7 col-xs-12">

												</div>
												<label style="color: red;" id="IdCardError"></label>
											</div>
											<div class="ln_solid"></div>
											<div class="form-group">
												<div class="col-md-6 col-md-offset-3">
													<button id="send" type="button" class="btn btn-success">新增</button>
													<button type="button" class="btn btn-primary" onclick="window.history.back(-1)">返回</button>
												</div>
											</div>
										</form>
					</div>
				</div>
							</div>
						</div>
				<!-- /page content -->

				<!-- footer content -->
				<footer>
					<div class="pull-right">
						Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
					</div>
					<div class="clearfix"></div>
				</footer>
				<!-- /footer content -->
			</div>
		</div>
			</div>
		</div>
		</div>
		</div>
		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- FastClick -->
		<script src="js/fastclick.js"></script>
		<!-- NProgress -->
		<script src="js/nprogress.js"></script>
		<!-- validator -->
		<script src="js/validator.js"></script>
		<script src="js/area.ui.js"></script>
		<!-- Custom Theme Scripts -->

		<!-- validator -->
		<script>
				$(document).ready(function(){
					$("#head").load("head.html");
				});
			// initialize the validator function
			validator.message.date = 'not a real date';

			// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
			$('form')
				.on('blur', 'input[required], input.optional, select.required', validator.checkField)
				.on('change', 'select.required', validator.checkField)
				.on('keypress', 'input[required][pattern]', validator.keypress);

			$('.multi.required').on('keyup blur', 'input', function() {
				validator.checkField.apply($(this).siblings().last()[0]);
			});

			$('form').submit(function(e) {
				e.preventDefault();
				var submit = true;

				// evaluate the form using generic validaing
				if (!validator.checkAll($(this))) {
					submit = false;
				}

				if (submit)
					this.submit();

				return false;
			});
                $(function(){
                    $(document).area("s_province","s_city","s_county");//调用插件
                    $('.cancel').click(function(){
                        var str="";
                        $('#s_province').children().each(function(){
                            if($(this).prop('selected')==true){
                                str+=$(this).html();
                            }
                        });
                        $('#s_city').children().each(function(){
                            if($(this).prop('selected')==true){
                                str+=$(this).html();
                            }
                        });
                        $('#s_county').children().each(function(){
                            if($(this).prop('selected')==true){
                                str+=$(this).html();
                            }
                        });
                        str  += document.getElementByItById('all').value;
                        $('#time').val(str);

                    });
                });
                //地区三级联动结速

                var $token = window.sessionStorage.getItem('token');
                $.ajax({
                    type: "post",
                    xhrFields: {withCredentials: true},
                    url: "http://localhost:8081/userInfo/userType",
                    dataType: "json",
                    data: {"token": $token},
                    success: function (data) {
                        $.each(data, function (i, depot) {
                            if(depot.id!=10&&depot.id!=1){
                            var $op = '<option value="' + depot.id + '">' + depot.typename + '</option>';
                            $("#utype").append($($op));
                            }
                        })
                    },
                    error: function () {
                        alert("用户类型加载错误");
                    }
                })

				// 表单验证开始
                var uPattern = /^[a-zA-Z][a-zA-Z0-9_-]{4,11}$/;
                var pPattern = /^[\w_-]{6,15}$/;
                var udPattern = /^[\u4E00-\u9FA5A-Za-z]+$/;
                var emPattern = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                var idPattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                $("#name").bind("blur",_userName1);
                $("#phone").bind("blur",_phone);
                $("#dlname").bind("blur",_dlname);
                $("#utype").bind("change",_typeId);
                $("#email").bind("blur",_email);
                $("#s_province").bind("change",_s_province);
                $("#s_city").bind("change",_s_city);
                $("#s_county").bind("change",_s_county);
                $("#IdCard").bind("blur",_IdCard);
                function _IdCard(){
                    var $IdCard = $("#IdCard").val();
                    if ($("#IdCard").val().trim()==""){
                        $("#IdCardError").html("身份证不能为空");
                        return false;
                    }else if (!(idPattern.test($IdCard))){
                        $("#IdCardError").html("请输入正确的身份证");
                        return false;
                    }else {
                        $.ajax({
                            type:"post",
                            xhrFields:{withCredentials:true},
                            url:" http://localhost:8081/userInfo/hasIdCard",
                            dataType:"json",
                            data:{"token": $token,"IdCard":$IdCard},
                            success:function(data) {
                                if(data.message =="yes"){
                                    $("#IdCardError").html("");
                                    return true;
                                }else if(data.message =="no"){
                                    $("#IdCardError").html("身份证已存在");
                                    return false;
                                }
                            },
                            error:function(){
                                alert("错误");
                            }
                        });
                    }
                }
                function _s_city(){
                    var $s_city = $("#s_city").val();
                    if ($s_city == ""){
                        $("#s_provinceError").html("城市不能为空");
                        return false;
                    }else {
                        $("#s_provinceError").html("");
                        return true;
                    }
                }
                function _s_county(){
                    var $s_county = $("#s_county").val();
                    if ($s_county == ""){
                        $("#s_provinceError").html("乡镇，区不能为空");
                        return false;
                    }else {
                        $("#s_provinceError").html("");
                        return true;
                    }
                }
                function _s_province(){
                    var $s_province = $("#s_province").val();
                    if ($s_province == ""){
                        $("#s_provinceError").html("省份不能为空");
                        return false;
                    }else {
                        $("#s_provinceError").html("");
                        return true;
                    }
                }
                function _email(){
                    var $email = $("#email").val();
                    if ($("#email").val().trim()==""){
                        $("#emailError").html("邮箱不能为空");
                        return false;
                    }else if (!(emPattern.test($email))){
                        $("#emailError").html("请输入正确的邮箱");
                        return false;
                    }else {
                        $("#emailError").html("");
                        return true;
                    }
                }
                function _typeId(){
                    var $typeId = $("#utype").val();
                    if ($typeId == ""){
                        $("#utypeError").html("用户类型不能为空");
                        return false;
                    }else {
                        $("#utypeError").html("");
                        return true;
                    }
                }
                function _dlname(){
                    var $udlname = $("#dlname").val();
                    if ($("#dlname").val().trim()==""){
                        $("#dluserNameError").html("真实姓名不能为空");
                        return false;
                    }else if (!(udPattern.test($udlname))){
                        $("#dluserNameError").html("只能输入中文和英文");
                        return false;
                    }else {
                        $("#dluserNameError").html("");
                        return true;
                    }
                }
                function _userName1(){
                    var $userName = $("#name").val();
                    if ($("#name").val().trim()==""){
                        $("#userNameError").html("用户名不能为空");
                        return false;
                    }else if (!(uPattern.test($userName))){
                        $("#userNameError").html("请填写正确的用户名");
                        return false;
                    }else {
                        $.ajax({
                            type:"post",
                            xhrFields:{withCredentials:true},
                            url:" http://localhost:8081/first/hasUserName",
                            dataType:"json",
                            data:{"userName":$userName},
                            success:function(data) {
                                if(data.message =="yes"){
                                    $("#userNameError").html("");
                                }else if(data.message =="no"){
                                    $("#userNameError").html("用户名已存在");
                                }
                            },
                            error:function(){
                                alert("错误");
                            }
                        });
                        $("#userNameError").html("");
                        return true;
                    }
                }
                function _phone(){
                    var $phone = $("#phone").val();
                    if ($("#phone").val().trim()==""){
                        $("#phoneError").html("手机号码不能为空");
                        return false;
                    }else if (!(/^1[34578]\d{9}$/.test($phone))){
                        $("#phoneError").html("请输入正确的手机号码");
                        return false;
                    }else {
                        $.ajax({
                            type:"post",
                            xhrFields:{withCredentials:true},
                            url:" http://localhost:8081/first/hasPhone",
                            dataType:"json",
                            data:{"phone":$phone},
                            success:function(data) {
                                if(data.message =="yes"){
                                    $("#phoneError").html("");
                                    return true;
                                }else if(data.message =="no"){
                                    $("#phoneError").html("电话已存在");
                                    return false;
                                }
                            },
                            error:function(){
                                alert("错误");
                            }
                        });
                    }
                }
                //表单验证结束

                $(document).on("click", "#send", function () {
                    var $s_province = $("#s_province").val();
                    var $s_city = $("#s_city").val();
                    var $s_county = $("#s_county").val();
                    if(_userName1()==false){
                        return false;
                    }else if(_dlname()==false){
                        return false;
                    }else if(_typeId()==false){
                        return false;
                    }else if(_phone()==false){
                        return false;
                    }else if(_email()==false){
                        return false;
                    }else if($s_province==""){
                        $("#s_provinceError").html("省份不能为空");
                        return false;
                    }else if($s_city==""){
                        $("#s_provinceError").html("城市不能为空");
                        return false;
                    }else if($s_county==""){
                        $("#s_provinceError").html("乡镇，区不能为空");
                        return false;
                    }else if(_IdCard()==false){
                        return false;
                    }else {
                        var $uname = $("#name").val();
                        var $udlname = $("#dlname").val();
                        var $typeId = $("#utype").val();
                        var $pwd = $("#pwd").val();
                        var $phone = $("#phone").val();
                        var $email = $("#email").val();
                        var $saddress = $s_province+"_"+ $s_city +"_"+ $s_county;
                        var $IdCard = $("#IdCard").val();

                        $.ajax({
                            type: "post",
                            xhrFields: {withCredentials: true},
                            url: "http://localhost:8081/userInfo/addUser",
                            dataType: "json",
                            data: {
                                "token": $token,
                                "userName": $uname,
                                "sAddress": $saddress,
                                "typeId": $typeId,
                                "sName": $udlname,
                                "pwd": $pwd,
                                "phone": $phone,
                                "email": $email,
                                "idCard": $IdCard
                            },
                            success: function (data) {
                                if (data.message == "yes") {
                                    window.location.href = "UserInfo.html";
                                } else {
                                    alert("新增用户失败")
                                }

                            },
                            error: function () {
                                alert("错误");
                            }
                        })
                    }
                })
		</script>
		<!-- /validator -->
	</body>
</html>
